<template>
  <div>
    <div class="search">
      <el-form :inline="true" :model="form" ref="formRef">
        <el-form-item label="班组名称" style="margin-left: 10px">
          <el-input v-model="teamsName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="工人姓名" style="margin-left: 10px">
          <el-input v-model="workerName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
          <el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
          <el-button type="primary" plain style="margin-left: 10px" @click="exportExcel">导出</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table">
      <el-table :data="tableData" stripe border @selection-change="handleSelectionChange">
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="workerId" label="工人ID" width="80"></el-table-column>
        <el-table-column prop="workerName" label="姓名">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit1(scope.row)">{{ scope.row.workerName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="teamsName" label="班组名称"></el-table-column>
        <el-table-column prop="identityCard" label="身份证号"></el-table-column>
        <el-table-column prop="attendanceDays" label="累计工时"></el-table-column>
        <el-table-column prop="wageScale" label="标准工资"></el-table-column>
        <el-table-column prop="wagePayable" label="累计应付工资"></el-table-column>
        <el-table-column prop="wagePaid" label="累计已付工资"></el-table-column>
        <el-table-column prop="wageUnpaid" label="累计欠付工资"></el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total"
        ></el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";

export default {
  name: "LaborSettlement",
  data() {
    return {
      tableData: [],  // 表格数据
      pageNum: 1,   // 当前页码
      pageSize: 10,  // 每页显示的数量
      total: 0,  // 数据总数
      teamsName: '',  // 班组名称查询条件
      workerName: null,  // 工人姓名查询条件
      selection: [] // 存储勾选的数据
    };
  },
  created() {
    this.load(1);  // 加载第一页数据
  },
  methods: {
    load(pageNum) {  // 分页查询
      if (pageNum) this.pageNum = pageNum
      this.$request.get('/workerInfo', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          teamsName:this.teamsName,
          workerName:this.workerName
        }
      }).then(res => {
        this.tableData = res.data?.rows
        this.total = res.data?.total
      })
    },
    handleEdit1(row) {   // 编辑数据
      this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据
      this.$router.push({
        name: "WorkerInformation",
        query: { param: this.form },
      })
    },
    handleSelectionChange(rows) {   // 当前选中的所有的行数据
      this.ids = rows.map(v => v.id)
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum);
    },
    reset() {
      this.teamsName = null;
      this.workerName = null;
      this.load(1);
    },
    exportExcel() {
      this.getExcel('.table', '劳务结算记录表');
    },
    getExcel(dom, title = '默认标题') {
      var excelTitle = title;
      // Filter selected rows for export
      const selectedRows = this.tableData.filter(row => this.selection.includes(row));
      var wb = XLSX.utils.table_to_book(document.querySelector(dom), { raw: true, sheet: "Sheet1", display: true, cellStyles: true });
      var wbout = XLSX.write(wb, { bookType: "xlsx", bookSST: true, type: "array" });
      try {
        FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            excelTitle + ".xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

    search() {
      this.load(1); // 查询时加载第一页数据
    }
  }
};
</script>

<style scoped>
.search {
  margin-bottom: 20px;
}

.table {
  overflow-x: auto;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
